<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电信管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <style>
        .login-box {
            border: 1px solid #DCDFE6;
            width: 350px;
            margin: 180px auto;
            padding: 35px 35px 15px 35px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            box-shadow: 0 0 25px #909399;
        }
        .login-title {
            text-align: center;
            margin: 0 auto 40px auto;
            color: #303133;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form ref="loginForm" label-width="80px" :rules="rules" :model="form" class="login-box">
        <h2 class="login-title">电信管理系统</h2>
        <el-form-item label="账号" prop="username">
            <el-input type="text" placeholder="请输入账号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
            <el-row>
                <el-col :span="16">
                    <el-input type="text" placeholder="请输入验证码" v-model="form.captcha"></el-input>
                </el-col>
                <el-col :span="8">
                    <img :src="captchaImage" @click="refreshCaptcha" style="cursor: pointer; height: 40px;"/>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width: 200px">登录</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    const Main = {
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                    captcha: ''
                },
                captchaImage: '',
                rules: {
                    username: [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                    captcha: [
                        {required: true, message: '验证码不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.refreshCaptcha();
        },
        methods: {
            refreshCaptcha() {
                axios.get('/captcha').then(response => {
                    this.captchaImage = response.data.image;
                });
            },
            onSubmit(formName) {
                const form = this.$refs[formName];
                form.validate((valid) => {
                    if (valid) {
                        console.info("表单校验成功,准备提交数据");
                        const form = this.form;
                        const $message = this.$message;
                        const params = new URLSearchParams();
                        params.append("username", form.username);
                        params.append("password", form.password);
                        params.append("captcha", form.captcha);
                        axios.post("/managerinfo/login", params, {})
                            .then(function (response) {
                                console.info(response);
                                if (response.data && response.data.code == 200) {
                                    const managerid = response.data.data.managerid;
                                    const managername = response.data.data.managername;
                                    const profilepicture = response.data.data.profilepicture;
                                    console.info(managerid);
                                    sessionStorage.managername = managername;
                                    sessionStorage.managerid = managerid;
                                    sessionStorage.profilepicture = profilepicture;
                                    window.location.href = "/index.html";
                                } else {
                                    $message.error({message: response.data.message, offset: 100});
                                }
                            })
                            .catch(function (error) {
                                console.error("请求失败：" + error);
                                let errorMessage = '请求失败';
                                if (error.response) {
                                    console.log(error.response);
                                    if (error.response.data && error.response.data.message) {
                                        errorMessage = error.response.data.message;
                                    } else if (error.response.statusText) {
                                        errorMessage = error.response.statusText;
                                    }
                                }
                                $message.error({message: errorMessage, offset: 100});
                            });
                    }
                })
            }
        }
    };
    // 初始化Vue,绑定Main中的数据,利用ElementPlus对#app容器进行重新渲染
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>
